import { Node, mergeAttributes } from "@tiptap/core";
import { ReactNodeViewRenderer } from "@tiptap/react";
import { TagComponent } from "./TagComponent";

export default Node.create({
  name: "reactComponent",
  group: "block",
  atom: true,
  
  addAttributes() {
    return {
      count: {
        default: 0
      }
    }
  },

  parseHTML() {
    return [
      {
        tag: "react-component",
      }
    ]
  },

  renderHTML({ HTMLAttributes }) {
    return ["react-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
  },

  addNodeView() {
    // 自定义 node 节点
    // 组件要渲染成什么样子 直接 将组件穿进去
    return ReactNodeViewRenderer(TagComponent);
  }
})
